<template>
	<view class="uni-item-bar">
		<image class="uni-item-img" :class="{'uni-item-border': imgBorder}" :src="imgSrc" :style="{'width': ImgW, 'height': ImgH}"></image>
		<view v-if="title" class="uni-item-title uni-font-size-lg" :style="{'text-align': titleDirection}">{{title}}</view>
		<view v-if="price" class="uni-item-price uni-text-color-active">
			<view class="uni-font-size-sm">￥</view>
			<view class="uni-font-size-lg">{{price}}</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: 'uniItem',
		title: '商品',
		props: {
			/**图片路径**/
			imgSrc: {
				type: String,
				default: ''
			},
			/**图片宽度**/
			imgW: {
				type: Number,
				default: 160
			},
			/**图片高度**/
			imgH: {
				type: Number,
				default: 160
			},
			/**图片边框**/
			imgBorder: {
				type: Boolean,
				default: true
			},
			/**标题**/
			title: {
				type: String,
				default: ''
			},
			/**标题方向**/
			titleDirection: {
				type: String,
				default: 'left'
			},
			/**标价格**/
			price: {
				type: Number,
				default: 0
			},
		},
		computed: {
			ImgW() {
				return `${this.imgW}rpx`
			},
			ImgH() {
				return `${this.imgH}rpx`
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.uni-item-bar{
		width: 100%;
		padding: 20upx 10upx;
		padding-bottom: 10upx;
		box-sizing: border-box;
		text-align: left;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		font-size: 0;
		.uni-item-img{
			width: 100%;
			border-radius: 10upx;
			&.uni-item-border{
				border: solid 1px #f6f6f6;
			}
			img{
				height: auto;
			}
		}
		.uni-item-title{
			width: 100%;
			padding: 10upx 0;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
		.uni-item-price{
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}

</style>
